<template>
  <div>
    <div class="common-card mt20">
      <dc-cell title="客流量趋势" class="main-title"></dc-cell>
      <div class="common-chart" id="flowColumn"></div>
      <dc-row class="pt40 pb40 mt20 bg-white" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.memberFlow}}</span>
          <span class="label">会员客流量</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.newOldMemberCompare}}</span>
          <span class="label">新老会员人数比</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.memberAvgCustomerMny}}</span>
          <span class="label">会员平均客单价</span>
        </dc-col>
      </dc-row>
    </div>
    <div class="common-card mt20">
      <dc-cell title="消费分布(会员VS非会员销售额占比)" class="main-title"></dc-cell>
      <div class="common-chart" id="custompie"></div>
    </div>
    <div class="common-card mt20 bg-white">
      <dc-row class="pt40 pb40" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.newMemberNum}}</span>
          <span class="label">今日新增会员</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.accuMemberNum}}</span>
          <span class="label">累计会员</span>
        </dc-col>
      </dc-row>
    </div>
    <div class="common-card">
      <dc-cell title="新增会员来源" class="main-title"></dc-cell>
      <div class="common-chart" id="newcolumn"></div>
    </div>
    <div class="common-card mt20 bg-white">
      <dc-row class="pt40 pb40" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.newMemberStoreMny}}</span>
          <span class="label">新增会员储值</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.acculMemberStoreMny}}</span>
          <span class="label">累计会员储值</span>
        </dc-col>
      </dc-row>
      <dc-row class="pt40 pb40" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.newMemberCredits}}</span>
          <span class="label">新增会员积分</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{memInfo.acculMemebeCredits}}</span>
          <span class="label">累计会员积分</span>
        </dc-col>
      </dc-row>
    </div>
  </div>
</template>

<script>
  import {initColumn} from '@/common/echarts/column';
  import {initPie} from '@/common/echarts/pie';
  import {col, row} from '@/common/Flex';
  import cell from '@/common/plugins/cell';
  import api from '@/common/api/passenger';

  export default {
    components: {
      'dc-cell': cell,
      'dc-col': col,
      'dc-row': row
    },
    props: {
      change: Object
    },
    data () {
      return {
        flowLines: {x: ['0'], y: ['0']},
        memInfo: {},
        saleData: [{value: '0', name: '会员', tip: 0}, {value: '0', name: '非会员', tip: 0}],
        newData: {x: ['0'], y: ['0']},
        flowColumn: null,
        salePie: null,
        sourceColumn: null
      };
    },
    watch: {
      change: {
        handler: function (value) { //深度监听，监听对象的变化
          this.buildChart();
        },
        deep: true
      }
    },
    mounted () {
      this.flowColumn = initColumn('#flowColumn');
      this.sourceColumn = initColumn('#newcolumn');
      this.salePie = initPie('#custompie');
      this.buildChart();
    },
    methods: {
      //重新生成所有图表
      buildChart () {
        let data = {
          timeFlag: this.change.type,
          beginTime: this.change.startTime,
          endTime: this.change.endTime
        };
        this._getFlowTrend(data);
        this._getFlowMember(data);
        this._getFlowSale(data);
      },
      _getFlowTrend (data) {       //获取门店客流分析信息
        this.flowLines = {x: ['0'], y: ['0']};
        this.flowColumn.showLoading();
        api.getFlowTrend(data)
          .then(res => {
            if (res) {
              this.flowLines.x = [];
              this.flowLines.y = [];
              let self = this;
              res.forEach((item) => {
                self.flowLines.x.push(item.timeName);
                self.flowLines.y.push(item.flowNum);
              });
            }
            this.initFlowsColumn();
          }, () => this.initFlowsColumn());
      },
      _getFlowMember (data) {       //获取会员信息
        this.memInfo = {};
        this.newData = {x: ['0'], y: ['0']};
        this.sourceColumn.showLoading();
        api.getFlowMember(data)
          .then(res => {
            if (res) {
              this.memInfo = res;
              this.newData.x = [];
              this.newData.y = [];
              let self = this;
              res.newMemberOrigInfo.forEach((item) => {
                self.newData.x.push(item.origType);
                self.newData.y.push(item.detail[0].num);
              });
            }
            this.initNewColumn();
          }, () => this.initNewColumn());
      },
      _getFlowSale (data) {       //获取消费分布会员非会员
        this.saleData = [{value: '0', name: '会员', tip: 0}, {value: '0', name: '非会员', tip: 0}];
        this.salePie.showLoading();
        api.getFlowSale(data)
          .then(res => {
            if (res) {
              this.saleData[0].value = res.memberSaleTotalRatio;
              this.saleData[0].tip = res.memberSaleTotalMny;
              this.saleData[1].value = res.noMemberSaleTotalRatio;
              this.saleData[1].tip = res.noMemberSaleTotalMny;
            }
            this.initSalePie();
          }, () => this.initSalePie());
      },
      //客流量趋势
      initFlowsColumn () {
        this.flowColumn.hideLoading();
        this.flowColumn.setOption({
          xAxis: [
            {
              type: 'category',
              data: this.flowLines.x
            }
          ],
          yAxis: [
            {
              name: '人数',
              type: 'value'
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: '60%',
              data: this.flowLines.y
            }
          ]
        });
      },
      //新增会员来源
      initNewColumn () {
        this.sourceColumn.hideLoading();
        this.sourceColumn.setOption({
          yAxis: [
            {
              name: '会员来源',
              type: 'value'
            }
          ],
          xAxis: [
            {
              type: 'category',
              data: this.newData.x
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              data: this.newData.y
            }
          ]
        });
      },
      //消费分布
      initSalePie () {
        this.salePie.hideLoading();
        this.salePie.setOption({
          tooltip: {
            formatter: function (params) {
              return params.name + ': ' + params.data.tip + '(' + params.value + '%)';
            }
          },
          series: [{
            // 根据名字对应到相应的系列
            name: '消费分布',
            type: 'pie',
            radius: '55%',
            data: this.saleData
          }]
        });
      }
    }
  };
</script>

<style lang="scss" >
</style>
